<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-form-item label="列1:" prop="column1">
        <el-input v-model="model.column1" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="列2:" prop="column2">
        <el-select v-model="model.column2" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="列3:" prop="column3">
        <el-radio-group v-model="model.column3">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="modelClose">关 闭</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { httpAction } from '@/api/manage'
export default {
  components: {},
  data() {
    return {
      model: {
        column1: '',
        column2: '',
        column3: 0
      },
      refName: 'ruleForm',
      visible: false,
      disableSubmit: false,
      title: '',
      width: '480px',
      options: [
        {
          label: '选项1',
          value: 1
        }, {
          label: '选项2',
          value: 2
        }, {
          label: '选项3',
          value: 3
        }
      ],
      rules: {
        column1: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        column2: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        column3: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      url: {
        add: 'http://47.92.154.219:200/api/TemplateTable.aspx?action=Insert',
        edit: 'http://47.92.154.219:200/api/TemplateTable.aspx?action=Update'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add() {
      this.updateState = 'add'
      this.visible = true
      this.model = {}
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
    },
    edit(rowData) {
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.model = { ...rowData }
    },
    submitForm() {
      console.log('表单数据', this.model)
      const that = this
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (that.updateState === 'add') {
            httpurl = that.url.add
            method = 'post'
          } else if (that.updateState === 'edit') {
            httpurl = that.url.edit
            method = 'post'
          } else {
            that.$message.warning('更新标识无效')
            return
          }
          this.$store.dispatch('app/setLoading', true)
          httpAction(httpurl, that.model, method).then((res) => {
            console.log('res', res)
            if (res.status === 0) {
              that.modelClose()
              that.$message.success(res.data || '操作成功！')
              that.$emit('ok')
            } else {
              that.$message.warning(res.data || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    },
    // 关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog
    handleCancel(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 0 30px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
</style>
